<template>
    <div>
        <el-card class="box-card">
            <div class="header-box">
                <span class="title-name">入库单名称 :</span>
                <el-input class="handle-input" clearable v-model="valueName" placeholder="请输入内容"></el-input>
            </div>
            <div class="header-box">
                <span class="title-name">请选择入库仓库 :</span>
                <el-select class="handle-select" clearable v-model="state" placeholder="请选择入库仓库">
                    <el-option v-for="item in optionState" :key="item.id" :label="item.repositoryName"
                        :value="item.id"></el-option>
                </el-select>
            </div>

            <el-button type="primary" icon="el-icon-search" @click="seled">查询</el-button>
            <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="add">添加入库单</el-button>
            <!-- <el-button type="primary" icon="el-icon-download">导入</el-button> -->
        </el-card>
        <div class="container">
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column type="index" label="序号" width="60" align='center'>
                    <template slot-scope="scope">
                        {{ scope.$index + (query.pageNum - 1) * query.pageSize + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="storeName" label="耗材入库主题" align='center'></el-table-column>
                <el-table-column prop="storeSourceName" label="入库来源" align='center'></el-table-column>
                <el-table-column prop="repositoryName" label="仓库" align='center'></el-table-column>
                <el-table-column prop="updateByName" label="入库人" align='center'></el-table-column>
                <el-table-column prop="updateByTime" label="入库时间" align='center'></el-table-column>
                <el-table-column prop="storeState" label="入库状态" align='center'>
                    <template slot-scope="scope">
                        <span>{{ scope.row.storeState == 1 ? '已入库' : '未入库' }}</span>
                    </template>

                </el-table-column>
                <el-table-column label="备注" align='center'>
                    <template slot-scope="scope">
                        <span>{{ scope.row.remark == 'undefined' ? '' : scope.row.remark }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" class="mr10" @click="edit(scope.row)">编辑</el-link>
                        <el-link type="danger" class="mr10" @click="del(scope.row.id)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class=" pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                    :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
        <inedit ref="edit" @refresh="storelistByPages" @close="visible = false" :visible="visible"></inedit>
        <inadd ref="adds" @close="disable = false" :disable="disable" @refresh="storelistByPages"></inadd>
    </div>
</template>

<script>
import { storelistByPage, repository, storedel } from '../../../api/index'
import inedit from './components/in_edit.vue'
import inadd from './components/in_add.vue'
export default {

    data() {
        return {
            disable: false,
            visible: false,
            valueName: "", //名称
            state: "", //状态
            pageTotal: 0,
            query: {
                repositoryId: "",
                storeName: "",
                pageNum: 1,
                pageSize: 10,
            },
            optionState: [],
            tableData: [{ name: '测试', state: '1' }, { name: '测试', state: '0' }],
        };
    },
    components: {
        inedit,
        inadd
    },
    mounted() {
        this.storelistByPages()
        this.repositorys()
    },
    methods: {
        //仓库
        async repositorys() {
            const data = await repository()
            this.optionState = data.data.data

        },
        edit(e) {
            this.visible = true
            this.$refs.edit.open(e)

        },
        add() {
            this.disable = true
            this.$refs.adds.open()

        },
        //删除
        del(id) {
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await storedel(id)
                this.storelistByPages()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handlePageChange(val) {
            this.query.pageNum = val;
            this.storelistByPages()

        },
        async storelistByPages() {
            const data = await storelistByPage(this.query)
            if (data.data.data.records.length == 0 && data.data.data.total > 0) {
                this.query.pageNum--
                this.storelistByPages()
                return
            }
            this.pageTotal = data.data.data.total
            this.tableData = data.data.data.records
        },
        //查询
        seled() {
            this.query.storeName = this.valueName
            this.query.repositoryId = this.state
            this.query.pageNum = 1
            this.storelistByPages()
        },
        // 重置
        reset() {
            this.query.storeName = ""
            this.valueName = ""
            this.query.repositoryId = ""
            this.state = ""
            this.query.pageNum = 1
            this.storelistByPages()
        },

    }
};
</script>

<style scoped>
.header-box {
    display: inline-block;
}

.title-name {
    font-size: 14px;
    margin-right: 10px;
}

.handle-input {
    width: 220px;
    margin-right: 10px;
}

.handle-select {
    width: 220px;
    margin-right: 10px;
}


.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}
</style>
